<template>
	<view class="apply">
		<u-cell-group :border="false">
			<u-cell-item title="申请状态"  :value="data.applymentStateDesc" :arrow="false"></u-cell-item>
			<u-cell-item title="签约状态" :value="SIGNSTATE[data.signState]" :arrow="false"></u-cell-item>
			<u-cell-item class="cellitem" title="签约链接" :arrow="false" :border-bottom="false" :value-style="style">
				<tki-qrcode  cid="qrcode1" ref="qrcode" :val="data.signUrl" :size="size" :unit="unit"
					:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
					:lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" />
				<view >*扫码二维码验证完成后手动查询状态</view>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		data() {
			return {
				data: '',
				SIGNSTATE: {
					UNSIGNED: '未签约',
					SIGNED: '已签约',
					NOT_SIGNABLE: '不可签约'
				},
				size: 280, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '', // 前景色
				pdground: '', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64,
				style:{
					color:'red'
				}
			}
		},
		components: {
			tkiQrcode
		},
		onLoad(option) {
			this.getData();
		},
		methods: {
			getData() {
				this.$u.api.getPayChannel().then(res => {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.apply {
		.cellitem{
			align-items: flex-start;
		}
	}
</style>
